<template>
	<view class="content">
		<view class="userInfo">
			<view class="userImage-box">
				<image class="userImage" src="../../static/image/userImage.png" mode=""></image>
			</view>
			<view class="userInfo-text">
				<!-- <view class="userId">{{userInfo.id}}</view> -->
				<view class="userName">{{userInfo.name}}</view>
				<view class="grade">等级：{{userInfo.grade}}</view>
			</view>
		</view>
		<view class="settingList">
			<view class="listItem" v-for="(item, i) in settingList" :key="i" @click="goPages(item)">
				<view class="listItem-text">{{item.text}}</view>
				<image class="jtLeft" src="../../static/image/jtLeft.png" mode=""></image>
			</view>
		</view>
		<view class="login-out" v-if="0">
			<view class="out-button">
				退出登录
			</view>
		</view>
		
		<!-- #ifdef H5 -->
		<view class="adBox">
			<ad adpid="1237469372" @load="adOnload" ad-height="100" type="feeds"></ad>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				title: '我',
				settingList: [
					// {text: '订单', path: '', division: false},
					{text: '积分', path: '/pages/integralRecord/integralRecord', division: false},
					// {text: '排名', path: '', division: false},
					{text: '关于APP', path: '', division: false}
				]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			goPages(item) {
				uni.navigateTo({
					url: item.path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	min-height: 100vh;
	padding: 0 36rpx;
	background: linear-gradient(rgba(186,144,108, 1), #eee 35%, #eee 100%);
	overflow: hidden;
}
.adBox{
	  position: fixed;
	  bottom: 0;
		left: 0;
		width: 100%;
		height: 160px;
		margin-top: 50rpx;
		overflow: hidden;
	}
.userInfo{
	display: flex;
	align-items: center;
	padding: 72rpx 0rpx;
	// border-bottom: 1rpx solid #bebebe;
	
	.userImage-box{
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			border: 1rpx solid #bebebe;
			overflow: hidden;
		}
		.userImage{
			width: 100%;
			height: 100%;
		}
		.userInfo-text{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// height: 80rpx;
			margin-left: 20rpx;
			font-size: 28rpx;
			.userName{
				font-weight: 600;
			}
			.grade{
				font-size: 24rpx;
				margin-top: 8rpx;
				color: #FF9000;
			}
		}
}

.settingList{
	padding: 0rpx 36rpx 36rpx;
	box-sizing: 10rpx 10rpx 0 #eee;
	background: #fff;
	border-radius: 20rpx;
	.listItem{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36rpx 0 36rpx;
		border-bottom: 1px solid #eee;
		.listItem-text{
			font-size: 30rpx;
		}
		.jtLeft{
			width: 34rpx;
			height: 34rpx;
		}
	}
}

.login-out{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 120rpx;
	.out-button{
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		text-align: center;
		background: #fff;
		border-radius: 20rpx;
		color: red;
	}
}
</style>
